<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { BorderBox9 as DvBorderBox9, BorderBox8 as DvBorderBox8, Decoration3 as DvDecoration3 } from '@kjgl77/datav-vue3'
import { ElCalendar } from 'element-plus'
import { ArrowUp, ArrowDown, Minus } from '@element-plus/icons-vue'
import { useVegetableStore } from '@/stores/vegetables'

// 天气数据
const weatherData = ref({
  temperature: 15,
  range: '7°C~17°C',
  time: '14:24发布',
  location: '云南的某个地方'
})

// 菜价数据
const vegetablePrices = ref([
  { name: '生菜', price: 2.5, unit: '元/斤', trend: 'up' },
  { name: '白菜', price: 1.8, unit: '元/斤', trend: 'down' },
  { name: '青椒', price: 3.2, unit: '元/斤', trend: 'up' },
  { name: '茄子', price: 2.8, unit: '元/斤', trend: 'stable' },
  { name: '黄瓜', price: 2.3, unit: '元/斤', trend: 'down' },
  { name: '西红柿', price: 3.5, unit: '元/斤', trend: 'up' }
])

// 模拟数据更新
const updatePrices = () => {
  vegetablePrices.value.forEach(item => {
    const change = (Math.random() - 0.5) * 0.5
    item.price = +(item.price + change).toFixed(1)
    item.trend = change > 0 ? 'up' : change < 0 ? 'down' : 'stable'
  })
}

onMounted(() => {
  setInterval(updatePrices, 30000)
})

const calendarValue = ref(new Date())

const vegetableStore = useVegetableStore()

// 当价格更新时
const updatePrice = (vegetableName: string, newPrice: number) => {
  vegetableStore.updatePrice(vegetableName, newPrice)
}
</script>

<template>
  <div class="right-panel w-1/4">
    <!-- 天气预报 -->
    <dv-border-box9 class="weather-box">
      <div class="panel-content">
        <div class="header">
          <dv-decoration3 class="decoration" />
          <h3 class="title">实时天气预报</h3>
          <dv-decoration3 class="decoration" />
        </div>
        <dv-border-box8 class="weather-content">
          <div class="weather-info">
            <div class="temperature">{{ weatherData.temperature }}°</div>
            <div class="weather-desc">多云 {{ weatherData.range }}</div>
            <div class="weather-time">{{ weatherData.time }}</div>
            <div class="weather-location">{{ weatherData.location }}</div>
          </div>
        </dv-border-box8>
      </div>
    </dv-border-box9>

    <!-- 实时菜价 -->
    <dv-border-box9 class="price-box">
      <div class="panel-content">
        <div class="header">
          <dv-decoration3 class="decoration" />
          <h3 class="title">实时菜价</h3>
          <dv-decoration3 class="decoration" />
        </div>
        <dv-border-box8 class="price-content">
          <div class="price-grid">
            <div 
              v-for="item in vegetablePrices" 
              :key="item.name"
              class="price-item"
            >
              <div class="item-name">{{ item.name }}</div>
              <div class="item-info">
                <span class="item-price">{{ item.price }}</span>
                <span class="item-unit">{{ item.unit }}</span>
                <el-icon 
                  class="trend-icon"
                  :class="{
                    'up': item.trend === 'up',
                    'down': item.trend === 'down',
                    'stable': item.trend === 'stable'
                  }"
                >
                  <ArrowUp v-if="item.trend === 'up'" />
                  <ArrowDown v-if="item.trend === 'down'" />
                  <Minus v-if="item.trend === 'stable'" />
                </el-icon>
              </div>
            </div>
          </div>  
        </dv-border-box8>
      </div>
    </dv-border-box9>

    <!-- 日历组件 -->
    <dv-border-box9 class="calendar-box">
      <div class="panel-content">
        <div class="header">
          <dv-decoration3 class="decoration" />
          <h3 class="title">日历</h3>
          <dv-decoration3 class="decoration" />
        </div>
        <el-calendar v-model="calendarValue" class="custom-calendar" />
      </div>
    </dv-border-box9>
  </div>
</template>

<style scoped>
.right-panel {
  width: 640px;
  height: 100%;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-right: 20px;
}

.weather-box, .price-box, .calendar-box {
  width: 600px;
}

.weather-box {
  height: 310px;
}

.price-box {
  height: 380px;
}

.calendar-box {
  height: 380px;
}

.panel-content {
  padding: 10px;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.decoration {
  width: 230px;
  height: 20px;
}

.title {
  color: #d9faff;
  font-size: 20px;
  font-weight: bold;
}

.weather-content {
  height: 230px;
}

.weather-info {
  text-align: center;
  padding: 28px 0;
  background-color: rgba(0, 70, 110, 0.3);
  border-radius: 8px;
  height: 230px;
}

.temperature {
  font-size: 50px;
  font-weight: bold;
  color: white;
  margin-bottom: 16px;
}

.weather-desc {
  font-size: 20px;
  color: #d1d5db;
  margin-bottom: 8px;
}

.weather-time {
  font-size: 16px;
  color: #9ca3af;
}

.weather-location {
  margin-top: 12px;
  font-size: 16px;
  color: #d1d5db;
}

.price-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.price-item {
  background-color: rgba(0, 70, 110, 0.3);
  padding: 12px;
  border-radius: 8px;
}

.item-name {
  color: #d1d5db;
  font-size: 20px;
  font-weight: bold;
  margin-left: 15px;
}

.item-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 5px;
  margin-left: 20px;
}

.item-price {
  font-size: 20px;
  color: white;
}

.item-unit {
  font-size: 14px;
  color: #9ca3af;
}

.trend-icon {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  font-size: 12px;
  -webkit-text-stroke: 1px;
}

.up {
  color: #f56c6c;
  font-size: 20px;
  font-weight: 900;
  text-shadow: 0 0 1px #f56c6c;
}

.down {
  color: #67c23a;
  font-size: 20px;
  font-weight: 900;
  text-shadow: 0 0 1px #67c23a;
}

.stable {
  color: #909399;
  font-size: 20px;
  font-weight: 900;
  text-shadow: 0 0 1px #909399;
}

.custom-calendar {
  --el-calendar-border: none;
  --el-calendar-header-border-bottom: none;
  --el-bg-color: transparent;
  --el-fill-color-blank: transparent;
  --el-text-color-regular: #ffffff;
  --el-calendar-selected-bg-color: #00466e;
  --el-border-color-lighter: #1a4a6e;
}

/* 日历头部样式 */
.custom-calendar :deep(.el-calendar__header) {
  border-bottom: 1px solid #1a4a6e;
  padding: 12px 20px;
}

/* 日历标题样式 */
.custom-calendar :deep(.el-calendar__title) {
  color: #ffffff;
  font-size: 16px;
}

/* 日历主体样式 */
.custom-calendar :deep(.el-calendar__body) {
  padding: 0 20px;
  height: 300px;
}

/* 日历表格样式 */
.custom-calendar :deep(.el-calendar-table) {
  width: 100%;
  border-collapse: separate;
  border-spacing: 8px;
}

/* 表头样式 */
.custom-calendar :deep(.el-calendar-table th) {
  padding: 3px;
  color: #d1d5db;
  font-weight: normal;
  font-size: 14px;
  text-align: center;
}

/* 日期单元格样式 */
.custom-calendar :deep(.el-calendar-table td) {
  padding: 4px;
  height: 20px;
  border: 1px solid #1a4a6e;
  text-align: center;
}

/* 日期样式 */
.custom-calendar :deep(.el-calendar-day) {
  height: 20px;
  padding: 4px;
  color: #ffffff;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 当前日期样式 */
.custom-calendar :deep(.is-selected) {
  background-color: #00466e;
}

.custom-calendar :deep(.el-calendar__button-group) {
  display: none;
}

/* 按钮样式 */
.custom-calendar :deep(.el-button) {
  color: #ffffff;
  border-color: #1a4a6e;
  background: transparent;
  font-size: 14px;
  padding: 4px 12px;
}

.custom-calendar :deep(.el-button:hover) {
  background-color: rgba(0, 70, 110, 0.5);
}
</style>

